<template>
    <div id="wrapper">
        {{a}}
        <ul>
            <!-- 因为vue-for有就地复用的策略所以必须v-bind:key判断是否重新渲染 -->
            <li v-for="(item,index) in content" :key="index">
                {{item.dept_name}}
                {{item.dept_id}}
                {{item.emp_name}}
                {{item.emp_birth}}
            </li>
        </ul>
        <div class="dataForm"></div>
        <!-- <iframe src="http://localhost:8080/Voice" allow='microphone;camera;midi;encrypted-media;'></iframe> -->
    </div>
    
    <el-button type="primary">主要按钮</el-button>
</template>
<script>
    export default {
        name: "TestVue",
        //data为什么要写成return
        //因为不使用return包裹的数据会在项目的全局可见，会造成变量污染
        // 使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
        data(){
            return{
                a:"傻瓜123",
                content:[],
                page:0,
            }
        },
        methods:{
            getData:async function() {
                try {
                    let response=await fetch("http://localhost/PHP_Pro01/EmployeeManagement/function/GetData.php?page=1")
                    let result=await response.json();
                    this.content=result
                    console.log(result)
                }catch (e) {
                    console.log(e)
                }
            },
            _init_:function(){
                if(navigator.mediaDevices.getUserMedia){
                    const constraints={audio:true};
				navigator.mediaDevices.getUserMedia(constraints).then(
                    stream=>{
                        console.log("授权成功")         
                    })
                }
            },
            test:async function(){
                try{
                    let response = await fetch("http://localhost:8080/selectByNo?Hno="+this.page)
                    let result=await response.json()
                    console.log(result)
                }catch(e){
                    console.log(e)
                }
            }
        },
        mounted() {
            // this._init_();
            this.getData();
            // this.test()
        },
        //在create里获取路由参数会默认抛出两个对象出来$route,$router
        created(){
            console.log(this.$route.params.page)
            this.page=this.$route.params.page
            console.log(this.page+"page is")
            console.log(this.$router)
        }
    }
</script>

<style scoped>
/* scoped意思是样式私有化 */
    #wrapper{
        width: 500px;
        height: 200px;
        background: red;
        font-family: 'FontAwesome';
    }
    .dataForm::before{
	content:"\f1fe";
	font-size: 20px;
	padding-right: 18px;
    }       
</style>